<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录注册 - InfluWatchDog</title>
    <meta name="description" content="登录或注册InfluWatchDog账户，开始您的网红信用查询之旅">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10">
    <!-- 顶部导航栏 -->
    <div class="navbar bg-base-100/80 backdrop-blur-sm shadow-lg sticky top-0 z-50">
        <div class="navbar-start">
            <a href="{{ url('/') }}" class="btn btn-ghost text-xl font-bold">
                <img src="{{ asset('image/logo.png') }}" alt="InfluWatchDog" class="h-8 w-auto">
                <span class="ml-2">InfluWatchDog</span>
            </a>
        </div>
        <div class="navbar-end">
            <a href="{{ url('/') }}" class="btn btn-ghost">返回首页</a>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="hero min-h-[calc(100vh-64px)] py-12">
        <div class="hero-content flex-col lg:flex-row-reverse max-w-6xl w-full">
            <!-- 右侧说明文字 -->
            <div class="text-center lg:text-left lg:w-1/2 lg:pl-12">
                <h1 class="text-4xl lg:text-5xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                    开启信用查询之旅
                </h1>
                <p class="text-lg lg:text-xl text-base-content/80 mb-8">
                    加入InfluWatchDog，让每一次合作都更加放心可靠
                </p>
                
                <!-- 特性展示 -->
                <div class="space-y-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <span class="text-base-content/80">真实记录，多方验证</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-secondary/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-4 h-4 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <span class="text-base-content/80">一键查询，快速判断</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-accent/10 rounded-full flex items-center justify-center mr-4">
                            <svg class="w-4 h-4 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                        </div>
                        <span class="text-base-content/80">匿名提交，保护隐私</span>
                    </div>
                </div>
            </div>

            <!-- 左侧登录注册表单 -->
            <div class="card bg-base-100 shadow-2xl w-full max-w-md lg:w-1/2" id="auth-form">
                <div class="card-body">
                    <!-- 标签切换 -->
                    <div class="relative bg-base-200/50 rounded-2xl p-1 mb-6 backdrop-blur-sm">
                        <div class="flex relative">
                            <!-- 滑动指示器 -->
                            <div 
                                id="tab-indicator" 
                                class="absolute top-1 bottom-1 w-1/2 bg-gradient-to-r from-primary to-secondary rounded-xl shadow-lg transition-all duration-300 ease-out"
                                style="left: 0;"
                            ></div>
                            
                            <!-- 登录按钮 -->
                            <button 
                                type="button"
                                class="relative z-10 flex-1 py-3 px-6 text-center font-medium rounded-xl transition-all duration-300 ease-out"
                                id="login-tab" 
                                onclick="switchMode('login')"
                            >
                                <span class="text-base-100 drop-shadow-sm">登录</span>
                            </button>
                            
                            <!-- 注册按钮 -->
                            <button 
                                type="button"
                                class="relative z-10 flex-1 py-3 px-6 text-center font-medium rounded-xl transition-all duration-300 ease-out text-base-content/70 hover:text-base-content"
                                id="register-tab" 
                                onclick="switchMode('register')"
                            >
                                <span>注册</span>
                            </button>
                        </div>
                    </div>

                    <!-- 标题 -->
                    <h2 class="text-3xl font-bold text-center mb-8" id="form-title">欢迎回来</h2>

                    <!-- 表单 -->
                    <form onsubmit="return submitForm(event)" class="space-y-6">
                        <!-- 邮箱 -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-medium">邮箱地址</span>
                            </label>
                            <div class="relative">
                                <input 
                                    type="email" 
                                    id="email"
                                    name="email"
                                    placeholder="请输入您的邮箱地址" 
                                    class="input input-bordered w-full pl-12"
                                    required
                                >
                                <svg class="w-5 h-5 absolute left-4 top-1/2 transform -translate-y-1/2 text-base-content/60 z-10 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                                </svg>
                            </div>
                            <label class="label hidden" id="email-error">
                                <span class="label-text-alt text-error"></span>
                            </label>
                        </div>

                        <!-- 密码 -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-medium">密码</span>
                            </label>
                            <div class="relative">
                                <input 
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="请输入密码" 
                                    class="input input-bordered w-full pl-12 pr-12"
                                    required
                                >
                                <svg class="w-5 h-5 absolute left-4 top-1/2 transform -translate-y-1/2 text-base-content/60 z-10 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                <button 
                                    type="button" 
                                    onclick="togglePasswordVisibility('password')"
                                    class="absolute right-4 top-1/2 transform -translate-y-1/2 text-base-content/60 hover:text-base-content"
                                >
                                    <svg class="w-5 h-5 password-show" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 password-hide hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                                    </svg>
                                </button>
                            </div>
                            <label class="label hidden" id="password-error">
                                <span class="label-text-alt text-error"></span>
                            </label>
                        </div>

                        <!-- 确认密码（仅注册时显示） -->
                        <div class="form-control" id="confirm-password-field" style="display: none;">
                            <label class="label">
                                <span class="label-text font-medium">确认密码</span>
                            </label>
                            <div class="relative">
                                <input 
                                    type="password"
                                    id="password_confirmation"
                                    name="password_confirmation"
                                    placeholder="请再次输入密码" 
                                    class="input input-bordered w-full pl-12 pr-12"
                                >
                                <svg class="w-5 h-5 absolute left-4 top-1/2 transform -translate-y-1/2 text-base-content/60 z-10 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                <button 
                                    type="button" 
                                    onclick="togglePasswordVisibility('password_confirmation')"
                                    class="absolute right-4 top-1/2 transform -translate-y-1/2 text-base-content/60 hover:text-base-content"
                                >
                                    <svg class="w-5 h-5 password-show" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                    </svg>
                                    <svg class="w-5 h-5 password-hide hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"></path>
                                    </svg>
                                </button>
                            </div>
                            <label class="label hidden" id="password_confirmation-error">
                                <span class="label-text-alt text-error"></span>
                            </label>
                        </div>

                        <!-- 邀请码（仅注册时显示） -->
                        <div class="form-control" id="invite-code-field" style="display: none;">
                            <label class="label">
                                <span class="label-text font-medium">邀请码</span>
                                <span class="label-text-alt">选填</span>
                            </label>
                            <div class="relative">
                                <input 
                                    type="text" 
                                    id="invite_code"
                                    name="invite_code"
                                    placeholder="请输入邀请码（可选）" 
                                    class="input input-bordered w-full pl-12"
                                >
                                <svg class="w-5 h-5 absolute left-4 top-1/2 transform -translate-y-1/2 text-base-content/60 z-10 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                </svg>
                            </div>
                            <label class="label hidden" id="invite_code-error">
                                <span class="label-text-alt text-error"></span>
                            </label>
                        </div>

                        <!-- 记住我/忘记密码 -->
                        <div class="form-control" id="remember-field">
                            <div class="flex items-center justify-between">
                                <label class="label cursor-pointer">
                                    <input type="checkbox" id="remember" name="remember" class="checkbox checkbox-primary checkbox-sm mr-3">
                                    <span class="label-text">记住我</span>
                                </label>
                                <a href="#" class="link link-primary text-sm">忘记密码？</a>
                            </div>
                        </div>

                        <!-- 服务条款（仅注册时显示） -->
                        <div class="form-control" id="terms-field" style="display: none;">
                            <label class="label cursor-pointer justify-start">
                                <input type="checkbox" id="agree_terms" name="agree_terms" class="checkbox checkbox-primary checkbox-sm mr-3">
                                <span class="label-text">
                                    我已阅读并同意
                                    <a href="{{ route('terms-of-service') }}" class="link link-primary">服务条款</a>
                                    和
                                    <a href="{{ route('privacy-policy') }}" class="link link-primary">隐私政策</a>
                                </span>
                            </label>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="form-control mt-8">
                            <button 
                                type="submit" 
                                id="submit-btn"
                                class="btn btn-primary btn-lg w-full"
                            >
                                立即登录
                            </button>
                        </div>
                    </form>

                    <!-- 分隔线 -->
                    <!-- <div class="divider my-8">或者</div> -->

                    <!-- 第三方登录 -->
                    <!-- <div class="space-y-3">
                        <button class="btn btn-outline btn-block" onclick="socialLogin('google')">
                            <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
                                <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                                <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                                <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                                <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                            </svg>
                            使用 Google 继续
                        </button>
                        <button class="btn btn-outline btn-block" onclick="socialLogin('github')">
                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                            </svg>
                            使用 GitHub 继续
                        </button>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <!-- 原生 JavaScript -->
    <script>
        // 当前模式：'login' 或 'register'
        let currentMode = 'login';
        let isLoading = false;

        // 切换登录/注册模式
        function switchMode(mode) {
            currentMode = mode;
            
            // 更新滑动指示器位置
            const indicator = document.getElementById('tab-indicator');
            const loginTab = document.getElementById('login-tab');
            const registerTab = document.getElementById('register-tab');
            
            if (mode === 'login') {
                // 移动到左侧（登录）
                indicator.style.left = '0';
                loginTab.querySelector('span').className = 'text-base-100 drop-shadow-sm';
                registerTab.querySelector('span').className = '';
                registerTab.className = registerTab.className.replace(/text-base-100.*?(?=\s|$)/, 'text-base-content/70 hover:text-base-content');
            } else {
                // 移动到右侧（注册）
                indicator.style.left = '50%';
                registerTab.querySelector('span').className = 'text-base-100 drop-shadow-sm';
                loginTab.querySelector('span').className = '';
                loginTab.className = loginTab.className.replace(/text-base-100.*?(?=\s|$)/, 'text-base-content/70 hover:text-base-content');
            }
            
            // 更新标题
            document.getElementById('form-title').textContent = mode === 'login' ? '欢迎回来' : '创建账户';
            
            // 显示/隐藏确认密码字段
            const confirmPasswordField = document.getElementById('confirm-password-field');
            if (confirmPasswordField) {
                confirmPasswordField.style.display = mode === 'register' ? 'block' : 'none';
                const confirmInput = document.getElementById('password_confirmation');
                if (confirmInput) {
                    confirmInput.required = mode === 'register';
                }
            }
            
            // 显示/隐藏邀请码字段
            const inviteCodeField = document.getElementById('invite-code-field');
            if (inviteCodeField) {
                inviteCodeField.style.display = mode === 'register' ? 'block' : 'none';
            }
            
            // 显示/隐藏记住我字段
            const rememberField = document.getElementById('remember-field');
            if (rememberField) {
                rememberField.style.display = mode === 'login' ? 'block' : 'none';
            }
            
            // 显示/隐藏服务条款字段
            const termsField = document.getElementById('terms-field');
            if (termsField) {
                termsField.style.display = mode === 'register' ? 'block' : 'none';
            }
            
            // 更新提交按钮文字
            const submitBtn = document.getElementById('submit-btn');
            if (submitBtn) {
                submitBtn.textContent = mode === 'login' ? '立即登录' : '立即注册';
            }
            
            // 清除所有错误
            clearErrors();
        }

        // 切换密码可见性
        function togglePasswordVisibility(fieldId) {
            const field = document.getElementById(fieldId);
            const button = field.parentElement.querySelector('button');
            const showIcon = button.querySelector('.password-show');
            const hideIcon = button.querySelector('.password-hide');
            
            if (field.type === 'password') {
                field.type = 'text';
                showIcon.classList.add('hidden');
                hideIcon.classList.remove('hidden');
            } else {
                field.type = 'password';
                showIcon.classList.remove('hidden');
                hideIcon.classList.add('hidden');
            }
        }

        // 提交表单
        async function submitForm(event) {
            event.preventDefault();
            
            if (isLoading) return false;
            
            isLoading = true;
            const submitBtn = document.getElementById('submit-btn');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = '处理中...';
            submitBtn.disabled = true;
            
            try {
                // 清除之前的错误
                clearErrors();
                
                // 获取表单数据
                const formData = {
                    email: document.getElementById('email').value,
                    password: document.getElementById('password').value,
                    remember: document.getElementById('remember') ? document.getElementById('remember').checked : false,
                };
                
                // 注册模式的额外字段
                if (currentMode === 'register') {
                    formData.password_confirmation = document.getElementById('password_confirmation') ? document.getElementById('password_confirmation').value : '';
                    formData.invite_code = document.getElementById('invite_code') ? document.getElementById('invite_code').value : '';
                    formData.agree_terms = document.getElementById('agree_terms') ? document.getElementById('agree_terms').checked : false;
                    
                    // 验证服务条款
                    if (!formData.agree_terms) {
                        showMessage('请先同意服务条款和隐私政策', 'error');
                        return false;
                    }
                }
                
                // 发送请求到后端
                const response = await fetch('/' + currentMode, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify(formData)
                });

                const result = await response.json();
                
                if (result.success) {
                    showMessage(result.message, 'success');
                    // 判断是否传递了 token（登录成功后会跳转到dashboard，在那里同步插件状态）
                    if (result.api_token) {
                        console.log('✅ 登录成功，即将跳转到dashboard并同步插件状态');
                    }
                    if (result.redirect) {
                        setTimeout(() => {
                            window.location.href = result.redirect;
                        }, 1000);
                    }
                } else {
                    // 处理验证错误
                    if (result.errors) {
                        displayErrors(result.errors);
                    } else {
                        showMessage(result.message || '操作失败，请重试', 'error');
                    }
                }
                
            } catch (error) {
                console.error('Error:', error);
                showMessage('操作失败，请重试', 'error');
            } finally {
                isLoading = false;
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            }
            
            return false;
        }

        // 显示错误信息
        function displayErrors(errors) {
            for (const [field, message] of Object.entries(errors)) {
                const errorElement = document.getElementById(field + '-error');
                const inputElement = document.getElementById(field);
                
                if (errorElement) {
                    errorElement.classList.remove('hidden');
                    errorElement.querySelector('span').textContent = Array.isArray(message) ? message[0] : message;
                }
                
                if (inputElement) {
                    inputElement.classList.add('input-error');
                }
            }
        }

        // 清除错误信息
        function clearErrors() {
            const errorElements = document.querySelectorAll('[id$="-error"]');
            errorElements.forEach(element => {
                element.classList.add('hidden');
            });
            
            const inputElements = document.querySelectorAll('.input-error');
            inputElements.forEach(element => {
                element.classList.remove('input-error');
            });
        }

        // 第三方登录
        function socialLogin(provider) {
            console.log('Social login with:', provider);
            // window.location.href = `/auth/${provider}`;
        }

        // 显示消息
        function showMessage(message, type = 'info') {
            if (type === 'success') {
                alert('✅ ' + message);
            } else if (type === 'error') {
                alert('❌ ' + message);
            } else {
                alert(message);
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化为登录模式
            switchMode('login');
            
            // 注意：插件状态同步已移动到dashboard页面
            console.log('🔗 登录/注册页面已加载，状态同步将在dashboard页面处理');
        });

        // 页面卸载时清理（可选）
        window.addEventListener('beforeunload', function() {
            // 这里可以添加页面关闭前的清理逻辑
        });
    </script>
</body>
</html> 